<template>
  <div class="add-class2">
    <!-- 步骤条 -->
    <div class="custom-steps">
      <div
        v-for="(step, index) in steps"
        :key="index"
        class="step-item"
        :class="{ active: active === index, completed: active > index }"
      >
        <div class="step-circle">{{ index + 1 }}</div>
        <div class="step-title">{{ step.title }}</div>
        <div v-if="index < steps.length - 1" class="step-separator">&gt;</div>
      </div>
    </div>
    <div class="btn">
      <div class="btn1">
        <el-button type="primary" plain size="small">星期六</el-button>
        <el-button type="primary" plain size="small">星期日</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button type="primary" plain size="small">早自习</el-button>
        <el-button type="primary" plain size="small">上午</el-button>
        <el-button type="primary" plain size="small">上午大课间</el-button>
        <el-button type="primary" plain size="small">午休</el-button>
        <el-button type="primary" plain size="small">下午</el-button>
        <el-button type="primary" plain size="small">下午大课间</el-button>
        <el-button type="primary" plain size="small">晚自习</el-button>
        <el-button type="primary" plain size="small">自定义</el-button>
      </div>
      <div class="btn2">
        <el-button type="primary">快速设置</el-button>
        <el-button type="primary">清除全部</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="yang" label="" width="160px" fixed>
          <template slot-scope="scope">
            <div class="ysz">

            <div class="text">
              <span>{{ scope.row.yang }}</span>
            </div>
            <div class="i">
              <i :class="scope.row.icon"></i>
              <i :class="scope.row.icon1"></i>
            </div>
          </div>
        </template>
        </el-table-column>
        <el-table-column prop="date" label="时间" width="140px">
        </el-table-column>
        <el-table-column prop="date1" label="星期一" width="140px">
        </el-table-column>
        <el-table-column prop="date2" label="星期二" width="140px">
        </el-table-column>
        <el-table-column prop="date3" label="星期三" width="140px">
        </el-table-column>
        <el-table-column prop="date4" label="星期四" width="140px">
        </el-table-column>
        <el-table-column prop="date5" label="星期五" width="140px">
        </el-table-column>
        <el-table-column prop="date6" label="星期六" width="140px">
        </el-table-column>
        <el-table-column prop="date7" label="星期七" width="140px">
        </el-table-column>
      </el-table>
    </div>
    <div class="btn">
      <el-button @click="$router.go(-1)">取消</el-button>
      <el-button type="primary" @click="next" style="margin-left: 30px;">下一步</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          yang: "早自习",
          icon:"el-icon-circle-plus-outline",
          icon1:"el-icon-more",
          date: "",
          date1: "",
          date2: "",
          date3: "",
          date4: "",
          date5: "",
          date6: "",
          date7: "",
        },
        {yang: "1节",
          icon:"el-icon-lollipop",
          icon1:"",},
          {yang: "2节",
          icon:"el-icon-lollipop",
          icon1:"",},
          {yang: "上午大课间",
          icon:"el-icon-lollipop",
          icon1:"",},
          {yang: "三节",
          icon:"el-icon-lollipop",
          icon1:"",},
          { yang: "4节",
          icon:"el-icon-circle-plus-outline",
          icon1:"el-icon-more",},
          {yang: "三节",
          icon:"el-icon-lollipop",
          icon1:"",},
          {yang: "三节",
          icon:"el-icon-lollipop",
          icon1:"",},{yang: "三节",
          icon:"el-icon-lollipop",
          icon1:"",},

          {yang: "三节",
          icon:"el-icon-lollipop",
          icon1:"",},
         
      ],
      active: 1,
      steps: [
        { title: "基本信息" },
        { title: "作息时间" },
        { title: "课程设置" },
        { title: "排课设置" },
        { title: "排课课位" },
        { title: "启动排课" },
        { title: "手动调整" },
        { title: "发布启用" },
      ],

    };
  },
  methods: {
    next() {
      if (this.active < 7) this.active++;
      else this.active = 0;
   
          this.$router.push({name: "AddClass2"});
       
   
    },
  },
};
</script>

<style scoped lang="scss">
.add-class2 {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;
}

.custom-steps {
  margin-top: 20px;
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin-bottom: 30px;
  background-color: #e0e6e8;
  height: 60px;
  .step-item {
    display: flex;
    align-items: center;

    .step-circle {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      background: #f0f2f5;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: #606266;
    }

    .step-title {
      margin: 0 10px;
      white-space: nowrap;
      font-size: 14px;
      color: #606266;
    }

    .step-separator {
      margin: 0 10px;
      color: #c0c4cc;
      font-weight: bold;
    }

    &.active {
      .step-circle {
        background: #409eff;
        color: white;
      }
      .step-title {
        color: #409eff;
        font-weight: bold;
      }
    }

    &.completed {
      .step-circle {
        background: #67c23a;
        color: white;
      }
      .step-title {
        color: #67c23a;
      }
    }
  }
}
.btn {
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .btn1 {
    flex: 1;
    display: flex;
  }

  ::v-deep .el-divider--vertical {
    height: 30px; // 调整竖线高度
    width: 2px; // 调整竖线宽度
  }
}

.table {
  width: 90%;
}
.ysz {
  display: flex;
  justify-content: space-between;
  .i {
    font-size: 20px;
  }
}
.btn{
    margin-top: 30px;
}
</style>
